<template>
    <div class="header">
      <template>
        <div class="header">
          <img src="../assets/logo2.png" alt="" style="margin: 30px" />
          <div class="content">
            <img src="../assets/learn.png" alt="" />
          </div>
        </div>
      </template>
  
      <div class="wraper">
        <p class="title">用户登录</p>
  
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="身份证" prop="userIdentity">
            <el-input
              type="text"
              v-model="ruleForm.userIdentity"
              autocomplete="off"
              placeholder="请输入身份证"
              prefix-icon="el-icon-user-solid"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="userPassword">
            <el-input
              type="password"
              v-model="ruleForm.userPassword"
              autocomplete="off"
              placeholder="请输入密码"
              prefix-icon="el-icon-unlock"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button  type="primary" @click="login('ruleForm')" style="float:right">登 录</el-button>
            <el-button @click="register()" style="float: left">注 册</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      var checkUserIdentity = (rule, value, callback) => {
        if (!value) {
          return callback(new Error("身份证不能为空"));
        }
        setTimeout(() => {
          if (!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
            callback(new Error("身份证有误"));
          }
          else {
              callback();
            }
        }, 1000);
      };
  
      var checkUserPassword = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入密码"));
        } else {
          callback();
        }
      };
  
      return {
        ruleForm: {
          userIdentity: "",
          userPassword: "",
        },
          rules: {
            userPassword: [{ validator: checkUserPassword, trigger: "blur" , required: true}],
            userIdentity: [{ validator: checkUserIdentity, trigger: "blur" , required: true}],
          },
      };
    },
    methods: {
      login(formName) {
        var info = {
          username: "王小虎",
          userid: 1001,
        };
        localStorage.setItem("info", JSON.stringify(info));
  
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$router.push("/home");
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      register() {
        this.$router.push("/register");
      },
    },
  };
  </script>
  
  <style scoped>
  .header {
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }
  
  .wraper {
    width: 30%;
    height: 300px;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    position: absolute;
    left: 95%;
    top: 50%;
    transform: translate(-90%, -50%);
    background: rgba(255, 255, 255, 1);
  }
  
  .title {
      color: #343434;
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 15px;
      text-align: center;
  }
  </style>
  